<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="jQuery图像照片剪裁插件Jcrop" />
<meta name="description" content="张鑫旭web前端学习之jQuery" />
<meta name="keywords" content="张鑫旭,鑫空间-鑫生活,博客,web前端,css,JavaScript,jQuery,插件,demo页面,学习" />
<meta name="author" content="张鑫旭,zhangxixnu" />
<title>jQuery图像照片剪裁插件Jcrop</title>
<link rel="shortcut icon" href="http://www.zhangxinxu.com/zxx_ico.png" />
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.3.2-min.js"></script>
<script type="text/javascript" src="../js/jquery.Jcrop.js"></script>
<style type="text/css">
.img_pos{padding:0 0 20px 12%;}
.animate_btns{padding-top:20px;}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		//初始化一个剪裁大小，左上角坐标(100,100)，右下角为(200,200)
		var api = $.Jcrop("#xuwanting",{
			setSelect: [100,100,200,200] //setSelect是Jcrop插件内部已定义的运动方法
		});
		var i, ac;
		//处理程序阻止事件的进行
		function nothing(e){
			e.stopPropagation();
			e.preventDefault();
			return false;
		};
		//返回动画回调的事件处理程序
		function anim_handler(ac){
			return function(e){
				api.animateTo(ac);
				return nothing(e);
			};
		};
		//设置一些动画的坐标
		var ac = {
			animate1:[50,50,450,320],
			animate2:[74,81,218,228],
			animate3:[8,8,32,360],
			animate4:[316,150,470,230],
			animate5:[80,160,500,190]
		};
		//附加相应的事件处理程序
		for(var i in ac){
			$("#"+i).click(anim_handler(ac[i]));	
		}
		//单击“重新设置”按钮后
		$("#reset").click(function(e){
			api.setSelect([200,125,300,225]);
			return nothing(e);						   
		});
	});
</script>
</head>

<body>
<div class="zxx_out_box">
    <div class="zxx_in_box">
        <div class="zxx_header">
            <a href="http://www.zhangxinxu.com/">
                <img class="l" src="http://www.zhangxinxu.com/wordpress/wp-content/themes/default/images/index_logo.gif" />
            </a>
            <span class="zxx_author_time">by zhangxinxu 2009-11-12 15:21</span>
        </div> 
        <h1 class="zxx_title">Jcrop照片剪裁插件API演示/动画效果</h1>
        <div class="zxx_main_con">
        	<div class="zxx_test_list">
                <div class="img_pos">
                	<img id="xuwanting" src="../image/xuwanting.jpg" />
                    <div class="animate_btns">
                    	<input type="button" value="动画1" id="animate1" />
                        <input type="button" value="动画2" id="animate2" />
                        <input type="button" value="动画3" id="animate3" />
                        <input type="button" value="动画4" id="animate4" />
                        <input type="button" value="动画5" id="animate5" />
                        <input type="button" value="重新设置" id="reset" />
                    </div>
                </div>
                <p><strong>API功能演示。</strong>单击上面的按钮显示不同的动画效果，这是比较初级的API演示Demo，增加了一些额外功能的API演示见（<a href="example5.html">高级API的演示</a>）。 </p>
                <p class="mt20 mb20"><a href="../index.html">&lt;&lt; 返回Demo实例首页</a></p>
                <div class="zxx_code">
                	<div class="mb10 f9 dot"><strong>JavaScript代码</strong></div>
                    <xmp>$(document).ready(function(){
    //初始化一个剪裁大小，左上角坐标(100,100)，右下角为(200,200)
    var api = $.Jcrop("#xuwanting",{
        setSelect: [100,100,200,200] //setSelect是Jcrop插件内部已定义的运动方法
    });
    var i, ac;
    //处理程序阻止事件的进行
    function nothing(e){
        e.stopPropagation();
        e.preventDefault();
        return false;
    };
    //返回动画回调的事件处理程序
    function anim_handler(ac){
        return function(e){
            api.animateTo(ac);
            return nothing(e);
        };
    };
    //设置一些动画的坐标
    var ac = {
        animate1:[50,50,450,320],
        animate2:[74,81,218,228],
        animate3:[8,8,32,360],
        animate4:[316,150,470,230],
        animate5:[80,160,500,190]
    };
    //附加相应的事件处理程序
    for(var i in ac){
        $("#"+i).click(anim_handler(ac[i]));	
    }
    //单击“重新设置”按钮后
    $("#reset").click(function(e){
        api.setSelect([200,125,300,225]);
        return nothing(e);						   
    });
});</xmp>
                </div>
            </div>
        </div>
        <div class="zxx_footer">
            Copyright &copy; by <a href="http://www.zhangxinxu.com/">张鑫旭-鑫空间-鑫生活</a>
            |
            <a href="http://www.zhangxinxu.com/wordpress/?p=359">该篇相关文章</a>
        </div>
    </div>
</div>
</body>
</html>
